<script setup lang="ts" name="Carousel">
import { CarouselProperty } from './config'

/** 轮播图 */

defineProps<{ property: CarouselProperty }>()

const currentIndex = ref(0)
const handleIndexChange = (index: number) => {
  currentIndex.value = index + 1
}
</script>

<template>
  <!-- 无图片 -->
  <div v-if="property.items.length === 0" class="h-250px flex items-center justify-center bg-gray-3">
    <SvgIcon icon="tdesign:image" class="text-gray-8 text-120px!" />
  </div>
  <div v-else class="relative">
    <ElCarousel height="174px" :type="property.type === 'card' ? 'card' : ''" :autoplay="property.autoplay" :interval="property.interval * 1000" :indicator-position="property.indicator === 'number' ? 'none' : undefined" @change="handleIndexChange">
      <ElCarouselItem v-for="(item, index) in property.items" :key="index">
        <ElImage class="h-full w-full" :src="item.imgUrl" />
      </ElCarouselItem>
    </ElCarousel>
    <div v-if="property.indicator === 'number'" class="absolute bottom-10px right-10px rounded-xl bg-black p-x-8px p-y-2px text-10px text-white opacity-40">{{ currentIndex }} / {{ property.items.length }}</div>
  </div>
</template>

<style scoped lang="scss"></style>
